<template>
	<view class="container">
		<view class="logo">
			<image src="" mode="aspectFill"></image>
		</view>
		<view class="ipt-wrap">
			<view class="ipt">
				<image src="../../static/images/icon7.png" mode="aspectFill" class="icon"></image>
				<input placeholder="账号" placeholder-class="pla-ipt" v-model="username" type="text" />
			</view>
			<view class="ipt">
				<image src="../../static/images/icon8.png" mode="aspectFill" class="icon"></image>
				<input placeholder="密码" placeholder-class="pla-ipt" type="password" v-model="password" v-if="passType == 'password'" />
				<input placeholder="密码" placeholder-class="pla-ipt" type="text" v-model="password" v-if="passType == 'text'" />
				<view class="show" @click="isShow">
					<image src="../../static/images/icon9.png" mode="aspectFill" v-if="passType == 'password'"></image>
					<image src="../../static/images/icon10.png" mode="aspectFill" v-if="passType == 'text'"></image>
				</view>
			</view>
		</view>
		<view class="btn-wrap" @click="login">
			<view class="btn">登录</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			passType: 'password',
			username: '',
			password: '',
			is_click: false
		}
	},
	onLoad() {
		console.log(11212121)
	},
	onShow() {
		console.log(23323)
	},
	methods: {
		isShow() {
			if (this.passType == 'password') {
				this.passType = 'text'
			} else {
				this.passType = 'password'
			}
		},
		login() {
			if (this.is_click) return;
			if (!this.username) {
				uni.showToast({
					title: '请输入账号',
					icon: 'none'
				})
				return
			} else if (!this.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				return
			}
			this.is_click = true
			uni.showLoading();
			this.$api.post(global.apiUrls.appLogin, {
				username: this.username,
				password: this.password
			}).then(res => {
				this.is_click = false
				uni.hideLoading()
				if (res.data.code == 9100) {
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					let info = res.data.info
					this.$store.commit('updateUserInfo', info);
					this.$api.post(global.apiUrls.getUserInfo).then(res => {
						if (res.data.code == 9100) {
							let data = res.data.info
							info.username = data.username
							info.employeeName = data.employeeName
							info.phoneNumber = data.phoneNumber
							info.positionName = data.positionName
							info.roleName = data.roleName
							info.headFileCode = data.headFileCode
							info.isMessage = data.isMessage
							info.loginTime = data.loginTime
							info.lastLoginTime = data.lastLoginTime
							info.directory = data.directory
						}
						this.$store.commit('updateUserInfo', info);
					})
					setTimeout(() => {
						uni.switchTab({
							url:'/pages/tab/home/index'
						})
					}, 800)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					})
				}
			}).catch(err => {
				this.is_click = false
				uni.hideLoading()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	background: linear-gradient(to bottom right, #525ba0 , #e2a392);
	height: 100vh;
}
.logo {
	width: 100%;
	padding-top: 150rpx;
	display: flex;
	justify-content: center;
	overflow: hidden;
	image {
		width: 360rpx;
		height: 360rpx;
		border-radius: 36rpx;
		background-color: #eee;
	}
}
.ipt-wrap {
	padding: 88rpx 120rpx;
	.ipt {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.5);
		padding: 16rpx 50rpx 16rpx 0;
		position: relative;
		.icon {
			width: 50rpx;
			height: 50rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}
		.pla-ipt {
			color: rgba(255, 255, 255, 0.5);
		}
		input {
			font-size: 38rpx;
			color: #fff;
		}
		.show {
			width: 50rpx;
			position: absolute;
			right: 0;
			display: flex;
			justify-content: center;
			z-index: 9;
			image {
				width: 100%;
				height: 40rpx;
			}
		}
	}
}
.btn-wrap {
	display: flex;
	justify-content: center;
	margin-top: 200rpx;
	width: 100%;
	.btn {
		width: 460rpx;
		background-color: rgba(255, 255, 255, 0.5);
		text-align: center;
		height: 80rpx;
		border-radius: 80rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 36rpx;
	}
}
</style>